<!doctype html>
<html>
<head>
<style>
body{
}
#base {
	background:#88d;
	position:relative;
	width:100%;
	height:500px;
}
#proll{
	position:absolute;
	left:16px;
	top:50px;
}
#xrange{
	position:absolute;
	left:700px;
	top:400px;
}
#xoffset{
	position:absolute;
	left:480px;
	top:400px;
}
#yrange{
	position:absolute;
	left:850px;
	top:270px;
}
#yoffset{
	position:absolute;
	left:850px;
	top:60px;
}
#prollyoff{
	position:absolute;
	left:1040px;
	top:16px;
}
#prollyzoom{
	position:absolute;
	left:1040px;
	top:400px;
}
.ind{
	background:#00f;
	width:64px;
	height:8px;
	margin:0;
	padding:0;
	display:inline-block;
}
.pat{
	background:#00f;
	width:64px;
	height:32px;
	margin:0;
	padding:0;
	display:inline-block;
}
</style>
<script src="./webaudio-pianoroll.js"></script>
<script>
timebase=480;
actx=new AudioContext();

function Callback(ev){
	var o=actx.createOscillator();
	var g=actx.createGain();
	o.type="sawtooth";
	o.detune.value=(ev.n-69)*100;
	g.gain.value=0;
	o.start(actx.currentTime);
	g.gain.setTargetAtTime(0.2,ev.t,0.005);
	g.gain.setTargetAtTime(0,ev.g,0.1);
	o.connect(g);
	g.connect(actx.destination);
}
function Play(){
	actx.resume();
	document.getElementById("proll").play(actx,Callback);
}
function Layout(k){
	switch(k.id){
	case "xrange":
		document.getElementById("proll").xrange=k.value*timebase;
		break;
	case "xoffset":
		document.getElementById("proll").xoffset=k.value*timebase;
		break;
	case "yrange":
		document.getElementById("proll").yrange=k.value;
		break;
	case "yoffset":
		document.getElementById("proll").yoffset=k.value;
		break;
	}
}
</script>
</head>
<body>
<h1>webaudio-pianoroll timebase=480 "dragpoly" mode Live Demo</h1>
<hr/>
<h3>How to operate</h3>
<ul>
<li>X axis zoom by mouse wheel</li>
<li>Drag with the left button to create a specified length note.</li>
<li>Click existing note to select.</li>
<li> Drag with the right button to select notes within the specified area (Whether the note is included in the range or not is determined based on whether or not the beginning of the note is included).</li>
<li>Selected notes can be moved by left button dragging.</li>
<li>Drag the left or right edge of the selected note to change the length of the note.</li>
<li>Right click on the selected note to delete menu.</li>
</ul>
<hr/>
<h3><a href="https://github.com/g200kg/webaudio-pianoroll">GitHub Respository</a></h3>
<h3><a href="./index2.html">Other samples</a></h3>
<hr/>
<br/>
<div id="base">
<webaudio-pianoroll id="proll"
 		width="800" height="320"
		timebase="16" loop="1"
		xrange="64"
		yrange="22"
		markend="960"
		grid="16"
		wheelzoom="1"
		editmode="dragpoly"
		></webaudio-pianoroll>

<webaudio-slider onchange="Layout(this)" id="xrange" direction="horizontal" min="1" max="10" value="2"></webaudio-slider>
<webaudio-slider onchange="Layout(this)" id="xoffset" direction="horizontal" width="200" min="0" max="20" step="0.01" value="0"></webaudio-slider>
<webaudio-slider onchange="Layout(this)" id="yrange" min="3" max="32" value="16"></webaudio-slider>
<webaudio-slider onchange="Layout(this)" id="yoffset" min="30" max="120" height="200" value="60"></webaudio-slider>
</div>
<button onclick="document.getElementById('mml').value=(document.getElementById('proll').getMMLString())">getMMLString</button>
<button onclick="document.getElementById('proll').setMMLString(document.getElementById('mml').value)">setMMLString</button>
<button onclick="Play()">Play</button>
<button onclick="document.getElementById('proll').stop()">Stop</button>
<br/>
<textarea id="mml" rows="10" cols="80"></textarea>
<br/>
<hr/>
</body>
</html>
